<template>
	<view class="marketDetail-page">
		<view class="titel">
			<text>{{details.productName}}</text>
		</view>
		<view class="content">
			<quill-editor disabled v-if="details.productContent" v-model="details.productContent" 
				class="ql-editor" />
			<div v-if="details.productAttachment && details.productAttachment.length">
				<a v-for="(item,index) in details.productAttachment" :key="index" class="attachment"
					:href="item.fileUrl" target="_blank">{{item.fileName}}</a>
			</div>
		</view>


		<view class="footer">
			<button type="primary" @click="back" class="back-btn">返回</button>
			<button type="primary" @click="jump">我有需求</button>
		</view>
	</view>
</template>

<script>
	import api from 'api/modules/jinrong.js';
	
	export default {
		name: 'MarketDetail',
	
		data() {
			return {
				productId: '',
				details: '',
			}
		},
		onLoad(params) {
			if (params) {
				this.productId = params.productId
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				api.getProductDetail({
					productId: this.productId ? this.productId : 1
				}).then(res => {
					if (res.data.productAttachment) {
						res.data.productAttachment = JSON.parse(res.data.productAttachment)
					}
					this.details = res.data
				})
			},
			back() {
				uni.navigateBack()
			},
			jump() {
				uni.navigateTo({
					url: `MarketApply?productId=${this.productId}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.marketDetail-page {
		padding: 24rpx;
		box-sizing: border-box;

		.titel {
			text-align: center;

			text {
				display: inline-block;
				font-size: 36rpx;
				font-weight: 600;
				position: relative;

				&::after {
					position: absolute;
					height: 4rpx;
					content: '';
					display: block;
					width: 100%;
					background-color: #0B4E9E;
					opacity: 0.18;
					bottom: -10rpx;
				}
			}
		}

		.content {
			margin-top: 20rpx;
			// min-height: 880rpx;
			// max-height: 880rpx;
			box-sizing: border-box;
			border-right: 0;
			border-left: 0;
			overflow: auto;
			width: 700rpx;
			margin-bottom: 150rpx;

			.attachment {
				display: block;
				margin-bottom: 15rpx;
				font-size: 28rpx;
				color: #0B4E9E;
				margin-left: 40rpx;
			}
		}



		.footer {
			background-color: #fff;
			z-index: 10;
			width: 100vw;
			padding: 24rpx;
			box-sizing: border-box;
			height: 140rpx;
			border-top: 1rpx solid #f6f6f6;
			position: fixed;
			left: 0;
			bottom: 0rpx;
			display: flex;

			button {
				width: 200rpx;
				margin: auto;
				background-color: #0B4E9E;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 32rpx;

				&::after {
					border: 0;
				}
			}
		}
	}
</style>
